<template>
  <div>
    <a-row>
      <div style="margin-bottom: 8px">
        <span v-for="(con, index) in localConditions" :key="index">
          <a-tag color="cyan">{{con.field.label}}</a-tag>
          <a-tag color="red">{{con.operator.label}}</a-tag>
          <a-tag color="green">{{con.value}}</a-tag>
          <a-tag color="#f50" v-if="index !== localConditions.length - 1">且</a-tag>
        </span>
      </div>
    </a-row>
    <a-row>
    <a-table :columns="columns"
             :data-source="dataSource"
             :scroll="{ x: 1300 }"
             :loading="loading"
             :pagination="pagination"
             ref="TableInfo"
             @change="handleTableChange">
      <div slot="action" slot-scope="text">
        <a href="javascript:">详情</a>
        <a href="javascript:">变更日志</a>
      </div>
    </a-table>
    </a-row>
  </div>
</template>
<script>
const fixedColumn = {
  title: '操作',
  key: 'operation',
  fixed: 'right',
  width: 120,
  scopedSlots: { customRender: 'action' }
}

export default {
  props: {
    paramModelId: {
      require: true,
      default: ''
    },
    conditions: {}
  },
  data () {
    return {
      localConditions: [],
      dataSource: [],
      columns: [],
      loading: false,
      sortedInfo: null,
      paginationInfo: null,
      pagination: {
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      }
    }
  },
  mounted () {
    // 加载列
    this.$get('bizModel/fieldsInModel/' + this.paramModelId).then((r) => {
      for (let d in r.data) {
        this.columns.push({
          title: r.data[d].fieldDesc,
          dataIndex: r.data[d].fieldName,
          key: r.data[d].fieldId
        })
      }
      if (this.columns.length !== 0) {
        this.columns.push(fixedColumn)
      }
      this.localConditions = JSON.parse(JSON.stringify(this.conditions))
      this.search()
    })
  },
  methods: {
    handleTableChange (pagination, filters, sorter) {
      // 将这三个参数赋值给Vue data，用于后续使用
      this.paginationInfo = pagination
      this.filteredInfo = filters
      this.sortedInfo = sorter
      this.fetch({
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters
      }, this.localConditions)
    },
    search () {
      let {sortedInfo, filteredInfo} = this
      let sortField, sortOrder
      // 获取当前列的排序和列的过滤规则
      if (sortedInfo) {
        sortField = sortedInfo.field
        sortOrder = sortedInfo.order
      }
      this.fetch({
        sortField: sortField,
        sortOrder: sortOrder,
        ...filteredInfo
      }, this.localConditions)
    },
    fetch (params = {}, querypas) {
      // 显示loading
      this.loading = true
      if (this.paginationInfo) {
        // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
        this.$refs.TableInfo.pagination.current = this.paginationInfo.current
        this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize
        params.pageSize = this.paginationInfo.pageSize
        params.pageNum = this.paginationInfo.current
      } else {
        // 如果分页信息为空，则设置为默认值
        params.pageSize = this.pagination.defaultPageSize
        params.pageNum = this.pagination.defaultCurrent
      }
      let modelId = this.paramModelId
      let conditions = []
      for (let d in querypas) {
        // select组件已使用labelInValue属性，故获取选择值需要读取key
        conditions.push(querypas[d].field.key + `@@@` + querypas[d].operator.key + `@@@` + querypas[d].value)
      }
      this.$get('/bizData/query', {
        ...params, modelId, conditions
      }).then((r) => {
        let data = r.data
        const pagination = { ...this.pagination }
        pagination.total = data.total
        let dataSource = []
        for (let d in data.rows) {
          dataSource.push(JSON.parse(data.rows[d]))
        }
        this.dataSource = dataSource
        this.pagination = pagination
        // 数据加载完毕，关闭loading
        this.loading = false
      })
    }
  }
}
</script>
